<template>
	<view :class="['price', type1 ,'wr-class']">
		<view v-if="type1 === 'delthrough'" class="line" :style="{height:getPriceHeight}" />
		<view v-if="is_integral==0" class="symbol symbol-class">{{symbol}}</view>
		<view class="pprice">
			<view class="integer inline">{{pprice[0]}}</view>
			<view v-if="pprice[1]"
				:class="['decimal', 'inline', `${decimalSmaller ? 'smaller' : ''}`, 'decimal-class']">
				.{{pprice[1]}}</view>
		</view>
		<view v-if="is_integral==1" class="symbol symbol-class">{{symbol}}</view>

	</view>
</template>
<script setup name="price">
	import {
		watch,
		ref,
		computed
	} from 'vue'
	const props = defineProps({
		priceUnit: {
			type: String,
			default: () => "fen"
		},
		price: {
			type: String,
			default: () => "",
		}, // 价格, 以分为单位
		type1: {
			type: String,
			default: () => "", //
		}, //  main 粗体, lighter 细体, mini 黑色, del 中划线, delthrough 中划线，包括货币符号
		symbol: {
			type: String,
			default: () => "¥", // '￥',
		}, // 货币符号，默认是人民币符号￥
		fill: Boolean, // 是否自动补齐两位小数
		decimalSmaller: Boolean, // 小数字号小一点
		is_integral: {
			type: Number,
			default: () => 0
		}, //是否是积分
		lineThroughWidth: {
			type: String,
			default: () => "0.12em"
		}, // 划线价线条高度
		// this.format(newValue);
	});

	const pprice = ref([]);
	const format = (gprice) => {
		let price = parseFloat(gprice);
		if (!isNaN(price)) {
			const isMinus = price < 0;
			if (isMinus) {
				price = -price;
			}
			if (props.priceUnit === "yuan") {
				const priceSplit = price.toString().split(".");
				pprice.value[0] = priceSplit[0];
				pprice.value[1] = !priceSplit[1] ? "00" : priceSplit[1].length === 1 ?
					`${priceSplit[1]}0` : priceSplit[1];
			} else {
				price = Math.round(price * 10 ** 8) / 10 ** 8; // 恢复精度丢失
				price = Math.ceil(price); // 向上取整
				pprice.value[0] = price >= 100 ? `${price}`.slice(0, -2) : "0";
				pprice.value[1] = `${price + 100}`.slice(-2);
			}
			if (!props.fill) {
				// 如果 fill 为 false， 不显示小数末尾的0
				if (pprice.value[1] === "00") pprice.value[1] = "";
				else if (pprice.value[1][1] === "0") pprice.value[1] = pprice.value[1][0];
			}
			if (isMinus) {
				pprice.value[0] = `-${pprice[0]}`;
			}
		}
	}

	const getPriceHeight = computed(() => {
		let regExp = /'^\d+(\.\d+)?$'/i;
		let lineHeight = props.lineThroughWidth;
		if (lineHeight == null) {
			return '';
		}
		lineHeight = lineHeight + '';
		lineHeight = regExp.test(lineHeight) ? lineHeight + 'rpx' : lineHeight;
		return lineHeight;
	});

	watch(() => props.price, (val) => {
		format(val);
	}, {
		deep: true,
		immediate: true
	});


	const addUnit = (param) => {
		let regExp = /'^\d+(\.\d+)?$'/i;
		if (param == null) {
			return '';
		}
		param = param + '';
		return regExp.test(param) ? param + 'rpx' : param;
	}



	// const {
	// 	proxy
	// } = getCurrentInstance();
</script>
<style scoped>
	:host {
		display: inline-block;
		display: inline-block;
		font-weight: inherit;
	}

	.inline {
		display: inline;
		white-space: nowrap;
	}

	.price {
		display: inline;
		color: inherit;
		font-size: inherit;
		text-decoration: inherit;
	}

	.lighter {
		font-weight: 400;
		font-size: 32rpx;
	}

	.mini {
		font-size: 24rpx;
		color: #5d5d5d;
		font-weight: 400;
	}

	.del .pprice {
		font-size: 32rpx;
		color: #9b9b9b;
		text-decoration: line-through;
		font-weight: 400;
	}

	.delthrough {
		position: relative;
	}

	.delthrough .line {
		position: absolute;
		top: 50%;
		left: 0;
		right: 0;
		transform: translateY(-50%);
		margin: 0;
		background-color: currentColor;
	}

	.symbol {
		display: inline;
		color: inherit;
		font-size: inherit;
		font-size: 0.8em;
	}

	.pprice {
		display: inline;
		margin: 0 0 0 4rpx;
	}

	.integer {
		color: inherit;
		font-size: inherit;
	}

	.decimal {
		color: inherit;
		font-size: inherit;
	}

	.decimal.smaller {
		font-size: 0.8em;
		vertical-align: baseline;
	}
</style>